<template>
    <div class="app-container">
        <h2 style="text-align: center;">采购定价</h2>
        <el-button type="primary" @click="save">添加发货申请</el-button>
        <br><br>
        <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
            <table>
                <tr>
                    <th style="width: 120px;" colspan="8">基本信息</th>
                </tr>
                <tr>
                    <td>关联采购询价：</td>
                    <td><el-input v-model="form.associated" /></td>
                    <td>单据主题：</td>
                    <td><el-input v-model="form.documentsubject" :disabled="true" placeholder="保存后自动生成" /> </td>
                    <td>单据编号：</td>
                    <td>
                        <el-input v-model="form.receiptsCode" />
                    </td>
                    <td>定价人员：</td>
                    <td><el-input v-model="form.pricingPeople" /></td>
                </tr>
                <tr>
                    <td>询价日期：</td>
                    <td>
                        <el-date-picker v-model="form.enquiryTimes" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </td>
                    <td>定价日期：</td>
                    <td>
                        <el-date-picker v-model="form.pricingTimes" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </td>
                    <td>关联项目：</td>
                    <td><el-input v-model="form.enquiryProject" /></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>来源单据类型：</td>
                    <td><el-input v-model="form.sourcereType" /></td>
                    <td>来源单据：</td>
                    <td>
                        <el-input v-model="form.documentoforigin" />
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </el-form>
        <br>

        <!-- 产品信息 -->
        <el-button type="primary" @click="dialogFormVisible = true">添加产品</el-button>
        <br><br>
        <el-table ref="multipleTable" :data="lists" size="small" style="width: 100%;" @sort-change="sortChange"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="44px"></el-table-column>
            <el-table-column label="产品名称" prop="proName" align="center" />
            <el-table-column label="产品编号" prop="proCode" align="center" />
            <el-table-column label="规格型号" prop="specType" align="center" />
            <el-table-column label="单位" prop="gUnit" align="center" />
            <el-table-column label="数量" prop="proNumber" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="单价" prop="proPrice" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="税率%" prop="proTaxrate" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>


            <el-table-column label="票据类型" prop="billType" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="折扣" prop="proDiscount" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="未税折后单价" prop="proDiscountunit" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>


            <el-table-column label="含税单价" prop="proUnitprice" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="含税折后单价" prop="proIncludingtax" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="未税金额" prop="proUntaxedamount" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="税额" prop="proTheamount" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="总金额" prop="proSumprice" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="交货日期" prop="proDeliverydate" align="center" />

            <el-table-column label="备注" prop="proRemark" align="center" />
        </el-table>

        <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="cancel()" :title="formTitle"
            width="80%" height="500px">
            <el-row>
                <el-col :span="4">
                    <el-tree :data="defaultProps" render-after-expand="true" default-expand-all="true"
                        @node-click="handleNodeClick"></el-tree>
                </el-col>
                <el-col :span="20">
                    <el-button type="primary" size="small" @click="handleAddProduct">确认</el-button>
                    <el-table ref="multipleTable" :data="lists" size="small" style="width: 100%;"
                        @sort-change="sortChange" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="44px"></el-table-column>
                        <el-table-column label="产品名称" prop="proName" align="center" />
                        <el-table-column label="产品编号" prop="proCode" align="center" />
                        <el-table-column label="规格型号" prop="specType" align="center" />
                        <el-table-column label="单位" prop="gUnit" align="center" />
                        <el-table-column label="数量" prop="proNumber" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="单价" prop="proPrice" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="税率%" prop="proTaxrate" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>


                        <el-table-column label="票据类型" prop="billType" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="折扣" prop="proDiscount" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="未税折后单价" prop="proDiscountunit" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>


                        <el-table-column label="含税单价" prop="proUnitprice" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="含税折后单价" prop="proIncludingtax" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="未税金额" prop="proUntaxedamount" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="税额" prop="proTheamount" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="总金额" prop="proSumprice" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="交货日期" prop="proDeliverydate" align="center" />

                        <el-table-column label="备注" prop="proRemark" align="center" />
                        <el-table-column label="操作" align="center">
                            <template slot-scope="{row}">
                                <el-button type="primary" size="mini" @click="handleUpdate(row)" icon="el-icon-edit" />
                                <el-button type="danger" size="mini" @click="handleDelete(row)" icon="el-icon-delete" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-dialog>
        <br><br>


        <!-- 供应商信息 -->
        <el-button type="primary" @click="dstryinfo = true">添加供应商</el-button>
        <br><br>
        <el-table ref="multipleTable" :data="listses" size="small" style="width: 100%;" @sort-change="sortChange"
            @selection-change="handleSelectionChangedstr">
            <el-table-column type="selection" width="44px"></el-table-column>
            <el-table-column label="供应商名称" prop="dstriName" align="center" />
            <el-table-column label="数量" prop="dstriNumber" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="单价" prop="dstriPrice" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="税率%" prop="dstriTaxrate" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>


            <el-table-column label="票据类型" prop="dstriType" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="折扣" prop="dstriDiscount" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="未税折后单价" prop="untaxedprice" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>


            <el-table-column label="含税单价" prop="taxincluded" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="含税折后单价" prop="unitprice" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="未税金额" prop="untaxedamount" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="税额" prop="theamount" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="总金额" prop="sumPrice" align="center">
                <template slot-scope="{row}">
                    <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="交货日期" prop="deliverydate" align="center" />

            <el-table-column label="备注" prop="dstriRemark" align="center" />
            <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleUpdate(row)" icon="el-icon-edit" />
                    <el-button type="danger" size="mini" @click="handleDelete(row)" icon="el-icon-delete" />
                </template>
            </el-table-column>
        </el-table>


        <el-dialog :visible.sync="dstryinfo" :close-on-click-modal="false" @close="cancel()" :title="formTitle"
            width="80%" height="500px">
            <el-row>
                <el-col :span="4">
                    <el-tree :data="defaultPropse" render-after-expand="true" default-expand-all="true"
                        @node-click="handleNodeClick"></el-tree>
                </el-col>
                <el-col :span="20">
                    <el-button type="primary" size="small" @click="handleAddProduct">确认</el-button>
                    <el-table ref="multipleTable" :data="lists" size="small" style="width: 100%;"
                        @sort-change="sortChange" @selection-change="handleSelectionChangedstr">
                        <el-table-column type="selection" width="44px"></el-table-column>
                        <el-table-column label="供应商名称" prop="dstriName" align="center" />
                        <el-table-column label="数量" prop="dstriNumber" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="单价" prop="dstriPrice" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="税率%" prop="dstriTaxrate" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>


                        <el-table-column label="票据类型" prop="dstriType" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="折扣" prop="dstriDiscount" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="未税折后单价" prop="untaxedprice" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>


                        <el-table-column label="含税单价" prop="taxincluded" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="含税折后单价" prop="unitprice" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="未税金额" prop="untaxedamount" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="税额" prop="theamount" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="总金额" prop="sumPrice" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.quantitys" type="number" style="width: 100%;"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="交货日期" prop="deliverydate" align="center" />

                        <el-table-column label="备注" prop="dstriRemark" align="center" />
                        <el-table-column label="操作" align="center">
                            <template slot-scope="{row}">
                                <el-button type="primary" size="mini" @click="handleUpdate(row)" icon="el-icon-edit" />
                                <el-button type="danger" size="mini" @click="handleDelete(row)" icon="el-icon-delete" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-dialog>


    </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import { cloneDeep } from "lodash";

const defaultForm = {
    "associated": "",
    "enquiryTimes": "",
    "sourcereType": "",
    "documentsubject": "",
    "pricingTimes": "",
    "documentoforigin": "",
    "receiptsCode": "",
    "enquiryProject": "",
    "pricingPeople": "",
    shipper: '',
    deliveryDate: '',
    shippingMethod: '',
    expressCompanies: '',
    expressNumber: '',
    expressFees: '',
    shippingRemarks: '',
    shipmentStatus: 0,
    productDeliverylist: [{
        gNumber: '',
        quantity: 0,
        packagingmethod: ''
    }]
}
export default {
    name: 'Book',
    components: {
        Pagination
    },
    directives: {
        permission
    },
    props: [],
    data() {
        return {
            defaultProps: [{}],
            defaultPropse: [{}],
            rules: {
                documentSubject: [{
                    required: true,
                    message: '请输入主题',
                    trigger: 'blur'
                }],
                dueDate: [{
                    required: true,
                    message: '请输入描述',
                    trigger: 'blur'
                }],
                shipper: [{
                    required: true,
                    message: '价格',
                    trigger: 'blur'
                }],
            },
            form: Object.assign({}, defaultForm),
            lists: [{
                quantitys: 0,
                packagingmethods: 0
            }],
            listses: [
                {
                    quantitys: 0,
                    packagingmethods: 0
                }
            ],
            checked: [],
            companieslist: [],
            modelist: [],
            packaginglist: [],
            totalCount: 0,
            listLoading: true,
            formLoading: false,
            page: 1,
            dialogFormVisible: false,
            dstryinfo: false,
            multipleSelection: [],
            formTitle: '',
            isEdit: false,
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getTypeList();
        this.getList();
        this.getcompanieslist();
        this.getmodelist();
        this.getpackaginglist();
    },
    mounted() { },
    methods: {
        getListStatus(items, ids) {
            this.$axios
                .posts('api/business/workflow/node-status', ids)
                .then((response) => {
                    items.forEach((element) => {
                        response.items.filter((i) => {
                            if (i.entityId === element.id) {
                                element.status = i.status;
                                element.nodeId = i.nodeId;
                                element.nodeStatus = i.nodeName;
                            }
                        });
                    });
                    this.list = items;
                    this.listLoading = false;
                    console.log(this.list);
                });
        },
        getMenuData() {
            this.treeLoading = true;
            this.$axios.gets("api/business/supplierType/getSupTypeList?pId=0").then((response) => {
                this.menuData = response.items;
                this.menus = response.items.filter((_) => _.pid == null);
                this.treeLoading = false;
            });

        },
        getTypeList() {
            this.$axios
                .gets('/api/business/productsType/menu-item-list?pId=0')
                .then((response) => {
                    this.defaultProps = response.items;
                })
        },
        getList() {
            this.listLoading = true;
            this.$axios
                .gets('/api/business/pricing')
                .then((response) => {
                    this.totalCount = response.totalCount;
                    this.getListStatus(
                        response.items,
                        response.items.map((_) => _.id)
                    );
                });
        },
        handleAddProduct(val) {
            this.lists = this.checked;
            this.dialogFormVisible = false;
        },
        handleAddProductse(val) {
            this.listses = this.checked;
            this.dstryinfo = false;
        },
        handleSelectionChange(val) {
            console.log(val);
            this.form.productDeliverylist = [];
            val.forEach((element) => {
                this.form.productDeliverylist.push({
                    gNumber: element.gNumber,
                    quantity: element.quantitys,
                    packagingmethod: element.packagingmethods
                });
            })
        },
        sortChange(data) {
            const { prop, order } = data;
            if (!prop || !order) {
                this.handleFilter();
                return;
            }
        },
        handleSelectionChange1(val) {
            this.checked = [];
            val.forEach((element) => {
                this.checked.push(element);
            });
        },
        save() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    this.form.roleNames = this.checkedRole;
                    this.$axios.posts('/api/business/pricing/data-post', this.form).then(response => {
                        this.formLoading = false;
                        this.$notify({
                            title: '成功',
                            message: '新增成功',
                            type: 'success',
                            duration: 2000
                        });
                    }).catch(() => {
                        this.formLoading = false;
                    });
                }
            }
            );
        },
        getcompanieslist() {
            this.$axios
                .gets('api/base/dictDetails/all?Pid=dcc22715-71c6-1610-1fab-3a12b0285eaf')
                .then((response) => {
                    this.totalCount = response.totalCount;
                    this.getListStatus1(
                        response.items,
                        response.items.map((_) => _.id)
                    );
                });
        },
        getListStatus1(items, ids) {
            this.$axios
                .posts('api/business/workflow/node-status', ids)
                .then((response) => {
                    items.forEach((element) => {
                        response.items.filter((i) => {
                            if (i.entityId === element.id) {
                                element.status = i.status;
                                element.nodeId = i.nodeId;
                                element.nodeStatus = i.nodeName;
                            }
                        });
                    });
                    this.companieslist = items;
                    console.log(this.list);
                });
        },
        getmodelist() {
            this.$axios
                .gets('api/base/dictDetails/all?Pid=821ab0bc-b1df-128c-1307-3a12b023cc8a')
                .then((response) => {
                    this.totalCount = response.totalCount;
                    this.getListStatus2(
                        response.items,
                        response.items.map((_) => _.id)
                    );
                });
        },
        getListStatus2(items, ids) {
            this.$axios
                .posts('api/business/workflow/node-status', ids)
                .then((response) => {
                    items.forEach((element) => {
                        response.items.filter((i) => {
                            if (i.entityId === element.id) {
                                element.status = i.status;
                                element.nodeId = i.nodeId;
                                element.nodeStatus = i.nodeName;
                            }
                        });
                    });
                    this.modelist = items;
                    console.log(this.list);
                });
        },
        getpackaginglist() {
            this.$axios
                .gets('api/base/dictDetails/all?Pid=1b1fae99-f72d-f25f-ae39-3a12b679d530')
                .then((response) => {
                    this.totalCount = response.totalCount;
                    this.getListStatus3(
                        response.items,
                        response.items.map((_) => _.id)
                    );
                });
        },
        getListStatus3(items, ids) {
            this.$axios
                .posts('api/business/workflow/node-status', ids)
                .then((response) => {
                    items.forEach((element) => {
                        response.items.filter((i) => {
                            if (i.entityId === element.id) {
                                element.status = i.status;
                                element.nodeId = i.nodeId;
                                element.nodeStatus = i.nodeName;
                            }
                        });
                    });
                    this.packaginglist = items;
                    console.log(this.list);
                });
        },
    }
}

</script>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid #615d5d;
    text-align: left;
    padding: 8px;
}

tr {
    background-color: #62ed97;
}
</style>